<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col">
				<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
					:scroll-into-view="scrollInto" style="background-color: #ffffff;">
					<view class="pagecontrol-top-title">
						<view v-for="(item, index) in itemsArr" :key="index" class="pagecontrol-top-text"
							@click="changeTab(index)" :id="'tab' + index">
							<view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">
								{{ item }}
							</view>
							<view class="pagecontrol-bottom-line"
								:class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'">
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-col list" v-if="lists.length != 0">

					<view v-for="(item,index) in lists" :key="index">
						<!-- 已使用 -->
						<view class="flex-row list-item section_6" v-if="item.usingState==1">
							<view class="flex-row group_2 view_21 line-dash">
								<view class="flex-col group_3 view_22">
									<view class="flex-row text_5 view_23">
										<text class="text_21 text_42">￥</text>
										<text class="text_23 text_43">{{item.couponsAmount}}</text>
									</view>
									<text class="text_7 text_44">{{item.couponsTitle}}</text>
								</view>
								<view class="group_4">
								</view>
							</view>
							<view class="flex-col group_6 view_25">
								<text class="text_15 text_45">{{item.couponsTypeName}}</text>
								<view class="flex-row group_7 view_26">
									<text class="text_17 text_46">有效期至：{{item.deadline}}</text>
									<!-- <text class="image_1 text_47">12:23</text> -->
								</view>
								<view class="flex-col items-start group_9" @click="clicks(index)">
									<text class="text_39">详细信息</text>
									<view class="image_003">
										<u-icon size="26" name="arrow-down">
										</u-icon>
									</view>
								</view>
							</view>
							<view class="flex-col items-center text-wrapper view_28"><text class="text_19">已使用</text>
							</view>
							<!-- <view class="flex-col items-start group_6 view_12" v-show="false">
								<text class="text_15 text_31">· 不能和其他优惠券叠加使用</text>
								<text class="group_7 text_32">· 所有活动都能使用</text>
							</view> -->
						</view>
						<!-- 已过期 -->
						<view class="flex-row list-item section_6" v-else-if="item.usingState==2">
							<view class="flex-row group_2 view_21 line-dash">
								<view class="flex-col group_3 view_22">
									<view class="flex-row text_5 view_23">
										<text class="text_21 text_42">￥</text>
										<text class="text_23 text_43">{{item.couponsAmount}}</text>
									</view>
									<text class="text_7 text_44">{{item.couponsTitle}}</text>
								</view>
								<view class="group_4">

								</view>
							</view>
							<view class="flex-col group_6 view_25">
								<text class="text_15 text_45">{{item.couponsTypeName}}</text>
								<view class="flex-row group_7 view_26">
									<text class="text_17 text_46">有效期至：{{item.deadline}}</text>
									<!-- <text class="image_1 text_47">12:23</text> -->
								</view>
								<view class="flex-col items-start group_9" @click="clicks(index)">
									<text class="text_39">详细信息</text>
									<view class="image_002">
										<u-icon size="26" name="arrow-down">
										</u-icon>
									</view>
								</view>
							</view>
							<view class="flex-col items-center text-wrapper view_28"><text class="text_19">已过期</text>
							</view>
							<!-- <view class="flex-col items-start group_6 view_12" v-show="false">
								<text class="text_15 text_31">· 不能和其他优惠券叠加使用</text>
								<text class="group_7 text_32">· 所有活动都能使用</text>
							</view> -->
						</view>
						<!-- 未使用 -->
						<view class="flex-col list-item  u-m-b-30" v-else>
							<view class=" justify-center group_2">
								<view class="flex-row group_3">
									<text class="text_5">￥</text>
									<text class="text_7">{{item.couponsAmount}}</text>
								</view>
								<view class="flex-col group_4 view_2">
									<text class="text_9">{{item.couponsTitle}}</text>
									<view class="flex-row group_5">
										<text class="text_11">有效期至：{{item.deadline}}</text>
										<!-- <text class="text_13">12:23</text> -->
									</view>
								</view>
							</view>
							<view class="flex-col group_6">
								<text class="text_15">{{item.couponsTypeName}}</text>
								<view class="flex-col items-start group_007" @click="clicks(index)">
									<text class="text_17">详细信息</text>
									<view class="image_1">
										<u-icon size="26" name="arrow-down">
										</u-icon>
									</view>
								</view>
							</view>
							<view class="flex-col items-center text-wrapper" @click="go('/pages/index/index',true)">
								<text class="text_19">去使用</text>
							</view>
						</view>
						<view v-if="item.show" class="flex-col items-start view_012 u-m-b-30">
							<text class="text_15 text_31">· 不能和其他优惠券叠加使用</text>
							<text class="group_7 text_32">· 所有活动都能使用</text>
						</view>

					</view>

				</view>
				<view class="" v-else>
					<u-empty style="height: 85vh;" width="250" textSize="30rpx" mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isActive: true,
				itemsArr: ['全部', '未使用', '已使用', '已过期'],
				scrollInto: '',
				list1: [{
						name: '全部',
					}, {
						name: '未使用',
					}, {
						name: '已使用'
					},
					{
						name: '已过期'
					}
				],
				status: 0,
				index: 0,
				tabIndex: 0,
				lists: [],
				isShow: ''
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					console.log('wuwuFQ:', res);
					this.scrollH = res.windowHeight - 40;
					// #ifdef MP
					this.scrollH -= 44;
					// #endif
					console.log('wuwuFQ:', this.scrollH);
				}
			});
		},
		onShow() {
			this.couponList()
			this.isActive = true; //进入时优惠券详细信息 - 默认隐藏  true:隐藏 false: 显示
		},
		methods: {
			onPullDownRefresh() {
				this.init();
				setTimeout(() => {
					1
					uni.stopPullDownRefresh();
				}, 1000);
			},
			async init() {
				await this.couponList();
			},
			clicks(index) {
				let item = this.lists[index];
				item.show = !item.show;
				this.$set(this.lists, index, item);
				// this.isShow = e
			},
			click(item) {
				this.index = item.index;
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				// 滚动到指定元素
				this.scrollInto = 'tab' + index;
				this.couponList()
			},
			couponList() {
				var status = this.tabIndex
				var info = {
					usingState: 'all'
				}
				if (status == 1) {
					info = {
						usingState: 0
					}
				} else if (status == 2) {
					info = {
						usingState: 1
					}
				} else if (status == 3) {
					info = {
						usingState: 2
					}
				}
				console.log(info)
				this.$http('harryroom.buyInspection', info).then(r => {
					if (r.code == 200) {
						this.lists = r.data;
						this.lists.forEach(item => {
							item.shou = false;
						})
					}
				});
			},

		},
	};
</script>

<style scoped lang="scss">
	.line-dash {
		width: 185rpx;
		height: 70px;
		border-right: 1px dashed #e3e3e3;
	}

	.active {
		display: none;
	}

	.list-item {
		padding: 34rpx 32rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837767627660175.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	.group_2 {
		padding-bottom: 10rpx;
		position: relative;
	}

	.group_6 {
		padding: 0 9rpx;
		height: 40rpx;
	}

	.text-wrapper {
		padding: 15rpx 0 15rpx;
		background-color: #fe641a;
		border-radius: 28rpx;
		width: 136rpx;
		position: absolute;
		right: 28rpx;
		top: 117rpx;
	}

	.group_3 {
		position: absolute;
		left: -2rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.group_4 {
		margin-bottom: 2.5rpx;
		background-image: repeating-linear-gradient(0deg,
				#999999,
				#999999 8.47457627118644%,
				transparent 8.47457627118644%,
				transparent 11.864406779661016%);
		width: 1rpx;
		height: 118rpx;
	}

	.text_15 {
		font-size: 24rpx;
		align-self: flex-start;
		color: #333333;
		font-family: '.AppleSystemUIFont';
	}

	.group_7 {
		margin-top: -12rpx;
		height: 24rpx;
		position: relative;
	}

	.group_007 {
		margin-top: -20rpx;
		margin-left: 18rpx;
		height: 24rpx;
		position: relative;
	}

	.text_19 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		font-weight: 600;
		letter-spacing: 3rpx;
	}

	.group_9 {
		margin-top: 26rpx;
		height: 24rpx;
	}

	.text_5 {
		color: #fe641a;
		margin-top: 45rpx;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.text_7 {
		color: #fe641a;
		font-size: 60rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 800;
	}

	.text_9 {
		font-weight: 800;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_5 {
		margin-top: 24rpx;
	}

	.text_17 {
		margin-left: 173rpx;
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.image_1 {
		margin-left: 275rpx;
		margin-top: -24rpx;
		flex-shrink: 0;
	}

	.image_002 {
		margin-left: 105rpx;
		margin-top: -24rpx;
		flex-shrink: 0;
	}

	.image_003 {
		margin-left: 105rpx;
		margin-top: -24rpx;
		flex-shrink: 0;
	}

	.text_39 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.image_4 {
		margin-left: 88rpx;
		margin-top: -13rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 14rpx;
	}

	.text_11 {
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_13 {
		margin-left: 9.5rpx;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_21 {
		font-weight: 800;
		margin-top: 45rpx;
		color: #fe641a;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_23 {
		margin-left: 4rpx;
		color: #fe641a;
		font-size: 60rpx;
		font-family: '.AppleSystemUIFont';
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 100vh;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding-left: 66rpx;
		padding-right: 51rpx;
		background-color: #ffffff;
	}

	.list {
		padding: 20rpx 20rpx 86rpx;
	}

	.group_1 {
		padding: 25rpx 0 27rpx;
	}

	.section_2 {
		margin-left: 3rpx;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.blue {
		display: flex;
		flex-direction: column-reverse;
		align-self: flex-start;
		border-radius: 4rpx;
		margin-top: 24rpx;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 60rpx;
		height: 8rpx;
	}

	.section_4 {
		padding: 34rpx 28rpx 35rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837767882877970.png');
		position: initial;
		margin-top: 24rpx;
	}

	.section_5 {
		padding: 30rpx 4.5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827025245536815.png');
		margin: 28rpx 4rpx 0;
		filter: drop-shadow(0px 4rpx 2rpx #00000029);
	}

	.section_6 {
		padding: 30rpx 4.5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827025245536815.png');
		margin: 0rpx 4rpx 42rpx;
		filter: drop-shadow(0px 4rpx 2rpx #00000029);
	}

	.text_1 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_2 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_3 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.view_7 {
		padding-bottom: 6rpx;
		padding-left: 14rpx;
	}

	.view_12 {
		padding: initial;
		height: initial;
		margin-top: 55rpx;
	}

	.view_012 {
		background-color: #FFF6F1;
		padding: 68rpx 0 0 30rpx;
		letter-spacing: 2rpx;
		margin-left: 4rpx;
		width: 99%;
		height: 175rpx;
		box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .3);
		border-radius: 26rpx;
		margin-top: -60rpx;
	}


	.view_13 {
		padding-bottom: initial;
		position: initial;
	}

	.view_17 {
		padding: initial;
		height: initial;
		margin-left: 32.5rpx;
	}

	.view_20 {
		background-color: #d9d9d9;
		right: 24rpx;
		top: 113rpx;
	}

	.view_21 {
		padding-bottom: initial;
		position: initial;
	}

	.view_25 {
		padding: initial;
		height: initial;
		margin-left: 32.5rpx;
	}

	.view_28 {
		background-color: #d9d9d9;
		right: 24rpx;
		top: 113rpx;
	}

	.view_2 {
		margin-bottom: initial;
		background-image: initial;
		width: initial;
		height: initial;
	}

	.view_8 {
		left: 14rpx;
		top: 8rpx;
		transform: initial;
	}

	.view_10 {
		margin-bottom: initial;
		background-image: initial;
		width: initial;
		height: initial;
	}

	.text-wrapper_1 {
		padding: 9rpx 0 19rpx;
		background-color: #fe641a;
		border-radius: 28rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 136rpx;
	}

	.text_31 {
		align-self: initial;
		color: #999999;
		font-size: 22rpx;
		line-height: 26rpx;
	}

	.text_32 {
		margin-top: 20rpx;
		height: initial;
		position: initial;
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.view_14 {
		position: initial;
		left: initial;
		top: initial;
		transform: initial;
		margin-top: 7.5rpx;
		padding: 0 33.5rpx;
	}

	.text_36 {
		color: #666666;
		font-size: 28rpx;
		line-height: 33rpx;
	}

	.view_18 {
		margin-top: 24rpx;
		height: initial;
		position: initial;
	}

	.view_22 {
		position: initial;
		left: initial;
		top: initial;
		transform: initial;
		margin-top: -17rpx;
		padding: 0 15rpx;
	}

	.text_45 {
		font-weight: 800;
		color: #666666;
		font-size: 28rpx;
		line-height: 33rpx;
	}

	.view_26 {
		margin-top: 24rpx;
		height: initial;
		position: initial;
	}

	.view_9 {
		align-self: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.text_25 {
		margin-left: initial;
		color: #333333;
		font-size: 24rpx;
		line-height: 28rpx;
		align-self: center;
	}

	.group_8 {
		margin-top: 26rpx;
		height: 24rpx;
	}

	.text_30 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.view_15 {
		align-self: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.text_35 {
		margin-left: 9rpx;
		color: #999999;
		font-size: 24rpx;
		line-height: 28rpx;
	}

	.text_37 {
		margin-left: initial;
		color: #333333;
		font-size: 22rpx;
		line-height: 26rpx;
	}

	.text_38 {
		margin-left: 9.5rpx;
		margin-top: initial;
		flex-shrink: initial;
		width: initial;
		height: initial;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.view_23 {
		align-self: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.text_44 {
		margin-left: 35rpx;
		color: #999999;
		font-size: 24rpx;
		line-height: 28rpx;
	}

	.text_46 {
		margin-left: initial;
		color: #333333;
		font-size: 22rpx;
		line-height: 26rpx;
	}

	.text_47 {
		margin-left: 9.5rpx;
		margin-top: initial;
		flex-shrink: initial;
		width: initial;
		height: initial;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_29 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.image_3 {
		margin-left: 88rpx;
		margin-top: -13rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 14rpx;
	}

	.text_33 {
		color: #666666;
	}

	.text_34 {
		color: #666666;
	}

	.text_42 {
		color: #666666;
	}

	.text_43 {
		color: #666666;
	}

	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #ededed;
	}

	.pagecontrol-top-title {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: #a5a5a5;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #000000;
		font-size: 17px;
	}

	.pagecontrol-bottom-line {
		width: 70%;
		height: 4px;
		margin-top: 8px;
		border-radius: 80px;
		background-color: #2569e7;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.order-item {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.order-top-view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.order-store-name {
		font-size: 16px;
		font-weight: 500;
	}

	.order-status {
		font-size: 12px;
		color: #a5a5a5;
	}

	.order-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-date {
		margin: 6rpx 0;
	}

	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #a5a5a5;
		border: 1px solid #ededed;
	}
</style>
